{% extends 'base.html' %}
{% block title %}Namespace{% endblock %}
{% block item-1 %}layui-nav-itemed{% endblock %}
{% block item-1-3 %}layui-this{% endblock %}
{% block context %}
    <span class="layui-breadcrumb">
        <a href="#">首页</a>
        <a href="#">Kubernetes</a>
        <a><cite>PV - 创建</cite></a>
    </span>
    <hr>
    {% csrf_token %}
    <div class="layui-card">
        <div class="layui-card-body">

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
          <legend>创建PersistentVolume</legend>
        </fieldset>

        <form class="layui-form " onclick="return false">
            <div class="layui-form-item">
                <label class="layui-form-label">名称：</label>
                <div class="layui-input-block">
                  <input type="text" name="name" lay-verify="required" lay-reqtext="名称是必填项，不能为空！" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" pane="">
                <label class="layui-form-label">存储容量：</label>
                <div class="layui-input-block">
                  <input type="radio" name="capacity" value="1Gi" title="1Gi" checked="">
                  <input type="radio" name="capacity" value="5Gi" title="5Gi">
                  <input type="radio" name="capacity" value="10Gi" title="10Gi">
                  <input type="radio" name="capacity" value="20Gi" title="20Gi" >
                  <input type="radio" name="capacity"  title="自定义" disabled="">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">访问模式：</label>
                <div class="layui-input-block">
                  <input type="radio" name="access_mode" value="ReadWriteMany" title="多节点读写" checked="">
                  <input type="radio" name="access_mode" value="ReadOnlyMany" title="多节点只读">
                  <input type="radio" name="access_mode" value="ReadWriteOnce" title="单节点读写">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">存储类型：</label>
                <div class="layui-input-inline">
                <select name="storage_class">
                  <option value=""></option>
                  <optgroup label="单点存储(适合非核心业务)">
                    <option value="nfs">NFS</option>
                  </optgroup>
                  <optgroup label="分布式存储(暂不支持)">
                    <option value="cephfs">CephFS</option>
                    <option value="cephrbd">CephRBD</option>
                  </optgroup>
                </select>
                </div>
            </div>

            <div class="layui-form-item" style="padding-left: 30px">
                 <label class="layui-form-label">服务器IP：</label>
                 <div class="layui-input-block">
                   <select name="server_ip"  lay-verify="required" lay-search="" lay-filter="select_ns2">
                      <option value="">直接选择或搜索选择</option>
                      <option value="192.168.31.62">192.168.31.62</option>
                      <option value="192.168.31.63">192.168.31.63</option>
                    </select>
                 </div>
                 <label class="layui-form-label">挂载路径：</label>
                 <div class="layui-input-block">
                  <input type="text" name="mount_path" lay-verify="required" lay-reqtext="名称是必填项，不能为空！" placeholder="示例：pv0001" autocomplete="off" class="layui-input">
                 </div>
              </div>

              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button type="submit" class="layui-btn" lay-submit="" lay-filter="btn">立即提交</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
              </div>

        </form>

        </div>
    </div>
{% endblock %}
{% block custom_js %}

<script>

    layui.use(['form', 'layer'], function(){
      var form = layui.form;
      var $ = layui.jquery;

      //监听提交
      form.on('submit(btn)', function(data){
           data = data.field;
           csrf_token = $('[name="csrfmiddlewaretoken"]').val();
           data['csrfmiddlewaretoken'] = csrf_token;
           $.ajax({
               url: '{% url "pv_api" %}',
               type: 'POST',
               data: data,
               // 提交成功回调函数
               success: function (res) {
                   if(res.code == '0'){
                       layer.msg(res.msg,{icon:6});
                   } else {
                       layer.msg(res.msg, {icon:5})
                   }
               },
               // 访问接口失败函数
               error: function (res) {
                   layer.msg("服务器接口异常！", {icon:5})
               }
           })
      });

    });


</script>

{% endblock %}